import ReactDOM from 'react-dom';

function render () {
    ReactDOM.render(<App />, document.getElementById('root'));
  }
// App 组件也先备好

export default function App() {
    const [count, setCount] = useState([0]);
    const [name, setName] = useState('胖子');
    const [meizhi, setMeiZhi] = useState(()=>'大佬');
    return (
      <div>
        <p>You clicked {count} times</p>
        <p>Call me {name}</p>
        <p>{name} is meizhi ？</p>
        <button onClick={() => {
            setCount([count[0] + 1]);
            setName('胖子是渣男');
            // setMeiZhi((preMeizhi)=>`女装${preMeizhi}`);
        }}>
          Click me
        </button>
      </div>
    );
  }
  
  let state = []; // 存放状态变量
  let setters = []; // 存放更改状态变量的方法
  let stateIndex = 0; // 用来绑定state[...] 和 setters[...]，即状态变量和更改它的方法要保证1对1关系。
  
  
  function useState (initialState) {
    state[stateIndex] = state[stateIndex] ? state[stateIndex] : initialState; // 同理。这是把状态存放到数组当中。
    setters.push(createSetter()); // 根据索引stateIndex来创建setState方法，并push到setters数组当中。
    let value = state[stateIndex]; // 从状态变量数组中取值
    let setter = setters[stateIndex]; // 从setState方法数组中取出对应的setState
   stateIndex++
    return [value, setter]; // 返回，供调用者解构。
  }
  
  function createSetter () {
    return (newState) => {
      state[stateIndex]= newState;
      render();
    };
  }
  